<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Dock</h1>
        <p>Dock is a navigation component consisting of menuitems.</p>
    </div>
    <app-demoActions github="dock"></app-demoActions>
</div>

<div class="content-section implementation dock-demo">
    <h5>Basic</h5>
    <div class="dock-window">
        <p-dock [model]="dockBasicItems" position="bottom">
            <ng-template pTemplate="item" let-item>
                <img [src]="item.icon" [alt]="item.label" width="100%">
            </ng-template>
        </p-dock>

        <p-dock [model]="dockBasicItems" position="top">
            <ng-template pTemplate="item" let-item>
                <img [src]="item.icon" [alt]="item.label" width="100%">
            </ng-template>
        </p-dock>

        <p-dock [model]="dockBasicItems" position="left">
            <ng-template pTemplate="item" let-item>
                <img [src]="item.icon" [alt]="item.label" width="100%">
            </ng-template>
        </p-dock>


        <p-dock [model]="dockBasicItems" position="right">
            <ng-template pTemplate="item" let-item>
                <img [src]="item.icon" [alt]="item.label" width="100%">
            </ng-template>
        </p-dock>
    </div>


    <h5>Advanced</h5>
    <p-menubar [model]="menubarItems">
        <ng-template pTemplate="start">
            <i class="pi pi-apple"></i>
        </ng-template>
        <ng-template pTemplate="end">
            <i class="pi pi-video"></i>
            <i class="pi pi-wifi"></i>
            <i class="pi pi-volume-up"></i>
            <span>Fri 13:07</span>
            <i class="pi pi-search"></i>
            <i class="pi pi-bars"></i>
        </ng-template>
    </p-menubar>
    <div class="dock-window dock-advanced">
        <p-dock [model]="dockItems" position="bottom">
            <ng-template pTemplate="item" let-item>
                <img [src]="item.icon" [alt]="item.label" width="100%">
            </ng-template>
        </p-dock>

        <p-toast></p-toast>

        <p-dialog [(visible)]="displayFinder" [breakpoints]="{'960px': '50vw'}" [style]="{width: '30vw', height: '18rem'}" [draggable]="false" [resizable]="false">
            <p-tree [value]="nodes"></p-tree>
        </p-dialog>

        <p-dialog [maximizable]="true" [(visible)]="displayTerminal" [breakpoints]="{'960px': '50vw'}" [style]="{width: '30vw'}" [draggable]="false" [resizable]="false">
            <p-terminal welcomeMessage="Welcome to PrimeNG (cmd: 'date', 'greet {0}', 'random')" prompt="primeng $"></p-terminal>
        </p-dialog>

        <p-galleria [(value)]="images" [showThumbnails]="false" [showThumbnailNavigators]="false" [showItemNavigators]="true" [(visible)]="displayGalleria" [circular]="true" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '850px'}"
            [circular]="true" [fullScreen]="true">
            <ng-template pTemplate="item" let-item>
                <img [src]="item.previewImageSrc" style="width: 100%; display: block;"/>
            </ng-template>
        </p-galleria>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;DockModule&#125; from 'primeng/dock';
</app-code>

            <h5>Getting Started</h5>
            <p>Dock is a navigation component consisting of menuitems. It has a collection of additional options defined by the <i>model</i> property.</p>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class DockDemo &#123;

    dockItems: MenuItem[];

    ngOnInit() &#123;
        this.dockItems = [
            &#123;
                label: 'Finder',
                icon: "assets/showcase/images/dock/finder.svg"
            &#125;,
            &#123;
                label: 'App Store',
                icon: "assets/showcase/images/dock/appstore.svg"
            &#125;,
            &#123;
                label: 'Photos',
                icon: "assets/showcase/images/dock/photos.svg"
            &#125;,
            &#123;
                label: 'Trash',
                icon: "assets/showcase/images/dock/trash.png"
            &#125;
        ];

    &#125;
&#125;
</app-code>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-dock [model]="dockBasicItems" position="bottom"&gt;
    &lt;ng-template pTemplate="item" let-item&gt;
        &lt;img [src]="item.icon" [alt]="item.label" width="100%"&gt;
    &lt;/ng-template&gt;
&lt;/p-dock&gt;
</app-code>
            <h5>MenuModel API</h5>
            <p>Dock uses the common MenuModel API to define the items, visit <a [routerLink]="['/menumodel']">MenuModel API</a> for details.</p>

            <h5>Properties</h5>
            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>id</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Unique identifier of the element.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the element.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>object</td>
                            <td>null</td>
                            <td>Inline style of the element.</td>
                        </tr>
                        <tr>
                            <td>model</td>
                            <td>object</td>
                            <td>null</td>
                            <td>MenuModel instance to define the action items.</td>
                        </tr>
                        <tr>
                            <td>position</td>
                            <td>string</td>
                            <td>bottom</td>
                            <td>Position of element. Valid values are 'bottom', 'top', 'left' and 'right'.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-dock</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>p-dock-list</td>
                            <td>List of items.</td>
                        </tr>
                        <tr>
                            <td>p-dock-item</td>
                            <td>Each items in list.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
        <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/dock" class="btn-viewsource" target="_blank">
            <span>View on GitHub</span>
        </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;div class="dock-window"&gt;
    &lt;p-dock [model]="dockBasicItems" position="bottom"&gt;
        &lt;ng-template pTemplate="item" let-item&gt;
            &lt;img [src]="item.icon" [alt]="item.label" width="100%"&gt;
        &lt;/ng-template&gt;
    &lt;/p-dock&gt;

    &lt;p-dock [model]="dockBasicItems" position="top"&gt;
        &lt;ng-template pTemplate="item" let-item&gt;
            &lt;img [src]="item.icon" [alt]="item.label" width="100%"&gt;
        &lt;/ng-template&gt;
    &lt;/p-dock&gt;

    &lt;p-dock [model]="dockBasicItems" position="left"&gt;
        &lt;ng-template pTemplate="item" let-item&gt;
            &lt;img [src]="item.icon" [alt]="item.label" width="100%"&gt;
        &lt;/ng-template&gt;
    &lt;/p-dock&gt;


    &lt;p-dock [model]="dockBasicItems" position="right"&gt;
        &lt;ng-template pTemplate="item" let-item&gt;
            &lt;img [src]="item.icon" [alt]="item.label" width="100%"&gt;
        &lt;/ng-template&gt;
    &lt;/p-dock&gt;
&lt;/div&gt;


&lt;h5&gt;Advanced&lt;/h5&gt;
&lt;p-menubar [model]="menubarItems"&gt;
    &lt;ng-template pTemplate="start"&gt;
        &lt;i class="pi pi-apple"&gt;&lt;/i&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="end"&gt;
        &lt;i class="pi pi-video"&gt;&lt;/i&gt;
        &lt;i class="pi pi-wifi"&gt;&lt;/i&gt;
        &lt;i class="pi pi-volume-up"&gt;&lt;/i&gt;
        &lt;span&gt;Fri 13:07&lt;/span&gt;
        &lt;i class="pi pi-search"&gt;&lt;/i&gt;
        &lt;i class="pi pi-bars"&gt;&lt;/i&gt;
    &lt;/ng-template&gt;
&lt;/p-menubar&gt;
&lt;div class="dock-window dock-advanced"&gt;
    &lt;p-dock [model]="dockItems" position="bottom"&gt;
        &lt;ng-template pTemplate="item" let-item&gt;
            &lt;img [src]="item.icon" [alt]="item.label" width="100%"&gt;
        &lt;/ng-template&gt;
    &lt;/p-dock&gt;

    &lt;p-toast&gt;&lt;/p-toast&gt;

    &lt;p-dialog [(visible)]="displayFinder" [breakpoints]="&#123;'960px': '50vw'&#125;" [style]="&#123;width: '30vw', height: '18rem'&#125;" [draggable]="false" [resizable]="false"&gt;
        &lt;p-tree [value]="nodes"&gt;&lt;/p-tree&gt;
    &lt;/p-dialog&gt;

    &lt;p-dialog [maximizable]="true" [(visible)]="displayTerminal" [breakpoints]="&#123;'960px': '50vw'&#125;" [style]="&#123;width: '30vw'&#125;" [draggable]="false" [resizable]="false"&gt;
        &lt;p-terminal welcomeMessage="Welcome to PrimeNG (cmd: 'date', 'greet &#123;0&#125;', 'random')" prompt="primeng $"&gt;&lt;/p-terminal&gt;
    &lt;/p-dialog&gt;

    &lt;p-galleria [(value)]="images" [showThumbnails]="false" [showThumbnailNavigators]="false" [showItemNavigators]="true" [(visible)]="displayGalleria" [circular]="true" [responsiveOptions]="responsiveOptions" [containerStyle]="&#123;'max-width': '850px'&#125;"
        [circular]="true" [fullScreen]="true"&gt;
        &lt;ng-template pTemplate="item" let-item&gt;
            &lt;img [src]="item.previewImageSrc" style="width: 100%; display: block;"/&gt;
        &lt;/ng-template&gt;
    &lt;/p-galleria&gt;
&lt;/div&gt;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class DockDemo &#123;

    displayTerminal: boolean;

    displayFinder: boolean;

    displayGalleria: boolean;

    dockBasicItems: MenuItem[];

    dockItems: MenuItem[];

    menubarItems: any[];

    responsiveOptions: any[];

    images: any[];

    nodes: any[];

    subscription: Subscription;

    constructor(private galleriaService: PhotoService, private nodeService: NodeService, private messageService: MessageService, private terminalService: TerminalService) &#123; &#125;

    ngOnInit() &#123;
        this.dockBasicItems = [
            &#123;
                label: 'Finder',
                icon: "assets/showcase/images/dock/finder.svg"
            &#125;,
            &#123;
                label: 'App Store',
                icon: "assets/showcase/images/dock/appstore.svg"
            &#125;,
            &#123;
                label: 'Photos',
                icon: "assets/showcase/images/dock/photos.svg"
            &#125;,
            &#123;
                label: 'Trash',
                icon: "assets/showcase/images/dock/trash.png"
            &#125;
        ];

        this.dockItems = [
            &#123;
                label: 'Finder',
                tooltipOptions: &#123;
                    tooltipLabel: "Finder",
                    tooltipPosition: 'top',
                    positionTop: -15,
                    positionLeft: 15
                &#125;,
                icon: "assets/showcase/images/dock/finder.svg",
                command: () =&gt; &#123;
                    this.displayFinder = true;
                &#125;
            &#125;,
            &#123;
                label: 'Terminal',
                tooltipOptions: &#123;
                    tooltipLabel: "Terminal",
                    tooltipPosition: 'top',
                    positionTop: -15,
                    positionLeft: 15
                &#125;,
                icon: "assets/showcase/images/dock/terminal.svg",
                command: () =&gt; &#123;
                    this.displayTerminal = true;
                &#125;
            &#125;,
            &#123;
                label: 'App Store',
                tooltipOptions: &#123;
                    tooltipLabel: "App Store",
                    tooltipPosition: 'top',
                    positionLeft: 15,
                    positionTop: -15
                &#125;,
                icon: "assets/showcase/images/dock/appstore.svg",
                command: () =&gt; &#123;
                    this.messageService.add(&#123;severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE'&#125;);
                &#125;
            &#125;,
            &#123;
                label: 'Safari',
                tooltipOptions: &#123;
                    tooltipLabel: "Safari",
                    tooltipPosition: 'top',
                    positionTop: -15,
                    positionLeft: 15
                &#125;,
                icon: "assets/showcase/images/dock/safari.svg",
                command: () =&gt; &#123;
                    this.messageService.add(&#123;severity: 'warn', summary: 'Safari has stopped working'&#125;);
                &#125;
            &#125;,
            &#123;
                label: 'Photos',
                tooltipOptions: &#123;
                    tooltipLabel: "Photos",
                    tooltipPosition: 'top',
                    positionTop: -15,
                    positionLeft: 15
                &#125;,
                icon: "assets/showcase/images/dock/photos.svg",
                command: () =&gt; &#123;
                    this.displayGalleria = true
                &#125;
            &#125;,
            &#123;
                label: 'GitHub',
                icon: "assets/showcase/images/dock/github.svg",
            &#125;,
            &#123;
                label: 'Trash',
                icon: "assets/showcase/images/dock/trash.png",
                command: () =&gt; &#123;
                    this.messageService.add(&#123;severity: 'info', summary: 'Empty Trash'&#125;);
                &#125;
            &#125;
        ];

        this.menubarItems = [
            &#123;
                label: 'Finder',
                className: 'menubar-root'
            &#125;,
            &#123;
                label: 'File',
                items: [
                    &#123;
                        label: 'New',
                        icon: 'pi pi-fw pi-plus',
                        items: [
                            &#123;
                                label: 'Bookmark',
                                icon: 'pi pi-fw pi-bookmark'
                            &#125;,
                            &#123;
                                label: 'Video',
                                icon: 'pi pi-fw pi-video'
                            &#125;,

                        ]
                    &#125;,
                    &#123;
                        label: 'Delete',
                        icon: 'pi pi-fw pi-trash'
                    &#125;,
                    &#123;
                        separator: true
                    &#125;,
                    &#123;
                        label: 'Export',
                        icon: 'pi pi-fw pi-external-link'
                    &#125;
                ]
            &#125;,
            &#123;
                label: 'Edit',
                items: [
                    &#123;
                        label: 'Left',
                        icon: 'pi pi-fw pi-align-left'
                    &#125;,
                    &#123;
                        label: 'Right',
                        icon: 'pi pi-fw pi-align-right'
                    &#125;,
                    &#123;
                        label: 'Center',
                        icon: 'pi pi-fw pi-align-center'
                    &#125;,
                    &#123;
                        label: 'Justify',
                        icon: 'pi pi-fw pi-align-justify'
                    &#125;,

                ]
            &#125;,
            &#123;
                label: 'Users',
                items: [
                    &#123;
                        label: 'New',
                        icon: 'pi pi-fw pi-user-plus',

                    &#125;,
                    &#123;
                        label: 'Delete',
                        icon: 'pi pi-fw pi-user-minus',

                    &#125;,
                    &#123;
                        label: 'Search',
                        icon: 'pi pi-fw pi-users',
                        items: [
                            &#123;
                                label: 'Filter',
                                icon: 'pi pi-fw pi-filter',
                                items: [
                                    &#123;
                                        label: 'Print',
                                        icon: 'pi pi-fw pi-print'
                                    &#125;
                                ]
                            &#125;,
                            &#123;
                                icon: 'pi pi-fw pi-bars',
                                label: 'List'
                            &#125;
                        ]
                    &#125;
                ]
            &#125;,
            &#123;
                label: 'Events',
                items: [
                    &#123;
                        label: 'Edit',
                        icon: 'pi pi-fw pi-pencil',
                        items: [
                            &#123;
                                label: 'Save',
                                icon: 'pi pi-fw pi-calendar-plus'
                            &#125;,
                            &#123;
                                label: 'Delete',
                                icon: 'pi pi-fw pi-calendar-minus'
                            &#125;
                        ]
                    &#125;,
                    &#123;
                        label: 'Archieve',
                        icon: 'pi pi-fw pi-calendar-times',
                        items: [
                            &#123;
                                label: 'Remove',
                                icon: 'pi pi-fw pi-calendar-minus'
                            &#125;
                        ]
                    &#125;
                ]
            &#125;,
            &#123;
                label: 'Quit'
            &#125;
        ];

        this.responsiveOptions = [
            &#123;
                breakpoint: '1024px',
                numVisible: 3
            &#125;,
            &#123;
                breakpoint: '768px',
                numVisible: 2
            &#125;,
            &#123;
                breakpoint: '560px',
                numVisible: 1
            &#125;
        ];

        this.subscription = this.terminalService.commandHandler.subscribe(command =&gt; this.commandHandler(command));

        this.galleriaService.getImages().then(data =&gt; this.images = data);
        this.nodeService.getFiles().then(data =&gt; this.nodes = data);
    &#125;

    commandHandler(text) &#123;
        let response;
        let argsIndex = text.indexOf(' ');
        let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;

        switch (command) &#123;
            case 'date':
                response = 'Today is ' + new Date().toDateString();
                break;

            case 'greet':
                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
                break;

            case 'random':
                response = Math.floor(Math.random() * 100);
                break;

            case 'clear':
                response = null;
                break;

            default:
                response = 'Unknown command: ' + command;
                break;
        &#125;

        if (response) &#123;
            this.terminalService.sendResponse(response);
        &#125;
        else &#123;
            this.terminalService.sendResponse(response);
        &#125;
    &#125;

    ngOnDestroy() &#123;
        if (this.subscription) &#123;
            this.subscription.unsubscribe();
        &#125;
    &#125;
&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-dock-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
